Utilisateur:Maimonid/Modèle déroulante/début/Documentation

Ceci est la page de documentation de Utilisateur:Maimonid/Modèle déroulante/début [modifier] [purger].

Cette sous-page contient les instructions et les catégories de son utilisateur d'origine et elle n'est pas destinée à être visualisée directement.

Utilisation[modifier | modifier le code]

Cette documentation concerne

le modèle {{déroulante/début}} (qui s’utilise avec {{déroulante/fin}}) et permet de mettre un contenu utilisant des caractères interdits à l'intérieur d'un modèle (symboles "=", "|"), ainsi que des retours de lignes, etc.
le modèle {{déroulante/fin}}

Recommandations (voir Aide:Boîte déroulante et autres modèles déroulants) :

Ne pas utiliser de "déroulante" à l’intérieur d’une "boîte déroulante": le modèle "boîte déroulante" est différent et incompatible avec le présent modèle.
Utiliser avantageusement {{déroulante/début}} pour mettre un tableau dans une boite déroulante.

Utilisation : pour {{déroulante/début}}

{{déroulante|titre=TITRE|contenu=CONTENU}}
OU
{{déroulante/début
 |titre=TITRE
 |contenu=CONTENU
 |alignB = ALIGNB
 |selection = SELECTION
 |margeGauche  = MARGEGAUCHE
 |margeGaucheT  = MARGEGAUCHET
 |margeDroite = MARGEDROITE
 |margeDroiteT = MARGEDROITET
 |margeGaucheInterne = MARGEGAUCHEINTERNE
 |margeGaucheInterneT = MARGEGAUCHEINTERNET
 |margeDroiteInterne = MARGEDROITEINTERNE
 |margeDroiteInterneT = MARGEDROITEINTERNET
 |margeHaut = MARGEHAUT
 |margeHautT = MARGEHAUTT
 |margeBas = MARGEBAS
 |margeBasT = MARGEBAST
 |align=ALIGN
 |alignT=ALIGNT
 |arrondi = ARRONDI
 |arrondiT = ARRONDIT
 |hauteur = HAUTEUR
 |hauteurT = HAUTEURT
 |largeur=LARGEUR
 |largeurT=LARGEURT
 |couleurBordure = COULEURBORDURE
 |couleurBordureT = COULEURBORDURET
 |couleurFond = COULEURFOND
 |couleurFondT = COULEURFONDT 
 |épaisseurBordure = ÉPAISSEURBORDURE
 |épaisseurBordureT = ÉPAISSEURBORDURET
 |couleurF = COULEURF
 |couleurTexte = COULEURTEXTE
 |couleurTexteT = COULEURTEXTET
 |poidsFonte = POIDSFONTE
 |poidsFonteT = POIDSFONTET
 |tailleFonte = TAILLEFONTE
 |tailleFonteT = TAILLEFONTET
 |styleFonte = STYLEFONTE
 |styleFonteT = STYLEFONTET 
 }}

Utilisation : pour {{déroulante/début}}

{{déroulante/début|titre=TITRE|paramètres}}
Contenu
{{déroulante/fin}}

Exemple:

{{déroulante/début|titre=une boîte déroulante|largeurT=16%|largeur=60%|alignB=center|alignT=right
Contenu
{{déroulante/fin}}

donne

une boîte déroulante

Contenu

Paramètres nécessaires

paramètre effet valeurs possibles

titre Titre affiché de la boîte Totalement libre, mais le caractère « | » par exemple ne passe pas.

contenu Texte contenu dans la boîte Totalement libre.

Paramètres facultatifs

paramètre effet valeur par défaut valeurs possibles

selection affiche [Afficher/masquer] à droite du titre 0 0, 1, vide (équivalent à 0)

Positionnement

alignB positionnement global de la boîte left left, right, center, gauche, centre, droite

margeGauche indentation de la partie inférieure (état déplié) 0px dimension (px, em, %) . Cela inclut la bordure de la partie supérieure

margeGaucheT indentation gauche de la partie supérieure (titre) 0px dimension (px, em, %). Cela inclut la bordure de la partie supérieure

margeDroite indentation droite de la partie inférieure (état déplié) 0px dimension (px, em, %). Cela inclut la bordure de la partie supérieure

margeDroiteT indentation droite de la partie supérieure (titre) 0px dimension (px, em, %). Cela inclut la bordure de la partie supérieure

margeHaut espace vertical entre partie supérieure et inférieure (état déplié) 0px dimension (px, em, %)

margeHautT espace vertical précédant la partie supérieure 0px dimension (px, em, %)

margeBas espace vertical après la partie inférieure (état déplié) 0px dimension (px, em, %)

margeBasT espace vertical après la partie supérieure (état plié) 0px dimension (px, em, %)

align positionnement du contenu à l'intérieur de la partie inférieure (état déplié) left left, center, right, gauche, centre, droite

alignT positionnement du titre à l'intérieur de la partie supérieure left left, center, right, gauche, centre, droite

margeGaucheInterne indentation gauche du contenu de la partie inférieure (état déplié) 0px dimension (px, em, %). L'indentation est relative à l'indentation globale du contenu, fixée par align

margeGaucheInterneT indentation gauche du titre 0px dimension (px, em, %). L'indentation est relative à l'indentation globale du titre, fixée par alignT

margeDroiteInterne indentation droite du contenu de la partie inférieure (état déplié) 0px dimension (px, em, %). L'indentation est relative à l'indentation globale du contenu, fixée par align

margeDroiteInterneT indentation droite du titre 0px dimension (px, em, %). L'indentation est relative à l'indentation globale du titre, fixée par alignT

Hauteur, largeur, épaisseur, forme

hauteurT hauteur de la partie supérieure (titre) 1.6 em dimension dimension (px, em, %). Ne pas mettre une hauteur inférieure à 1.6em sous peine d’effets indésirables

largeur largeur de la partie inférieure 100% dimension (px, em, %)

largeurT largeur de la partie supérieure (titre) 100% dimension (px, em, %)

épaisseurBordure épaisseur bordure de la partie inférieure 1px dimension (px, em, %) , peut être mis à 0px

épaisseurBordureT épaisseur bordure de la partie supérieure 0px dimension (px, em, %)

arrondi arrondi des angles 0px (désactivé) Les angles peuvent apparaître arrondis si le navigateur le permet.
Visible sur les navigateurs Mozilla, non visible sur Internet Explorer.
Valeur conseillée : 0.6em, s’exprime en pt, px ou em

Fonte

tailleFonte taille de la fonte du contenu small medium, small etc. (cf. attributs css)

tailleFonteT taille de la fonte du titre small medium, small etc. (cf. attributs css)

poidsFonte poids de la fonte du contenu normal normal, bold etc. (cf. attributs css)

poidsFonteT taille de la fonte du titre normal normal, small etc. (cf. attributs css)

styleFonte style de la fonte du contenu normal normal, italic etc. (cf. attributs css)

styleFonteT style de la fonte du titre normal normal, small etc. (cf. attributs css)

Couleurs

couleurBordure

couleur de la bordure boîte inférieure dépliée

#AAAAAA

Expression de couleur valide
exemples : black, #C080FF, …

Table des couleurs

Page d’aide principale : Aide:Couleurs

Nom de la couleur	Rendu	Hexadécimal
AliceBlue		`#F0F8FF`
AntiqueWhite		`#FAEBD7`
Aqua		`#00FFFF`
Aquamarine		`#7FFFD4`
Azure		`#F0FFFF`
Beige		`#F5F5DC`
Bisque		`#FFE4C4`
Black		`#000000`
BlanchedAlmond		`#FFEBCD`
Blue		`#0000FF`
BlueViolet		`#8A2BE2`
Brown		`#A52A2A`
BurlyWood		`#DEB887`
CadetBlue		`#5F9EA0`
Chartreuse		`#7FFF00`
Chocolate		`#D2691E`
Coral		`#FF7F50`
CornflowerBlue		`#6495ED`
Cornsilk		`#FFF8DC`
Crimson		`#DC143C`
Cyan		`#00FFFF`
DarkBlue		`#00008B`
DarkCyan		`#008B8B`
DarkGoldenrod		`#B8860B`
DarkGray		`#A9A9A9`
DarkGreen		`#006400`
DarkKhaki		`#BDB76B`
DarkMagenta		`#8B008B`
DarkOliveGreen		`#556B2F`
DarkOrange		`#FF8C00`
DarkOrchid		`#9932CC`
DarkRed		`#8B0000`
DarkSalmon		`#E9967A`
DarkSeaGreen		`#8FBC8F`
DarkSlateBlue		`#483D8B`
DarkSlateGray		`#2F4F4F`
DarkTurquoise		`#00CED1`
DarkViolet		`#9400D3`
DeepPink		`#FF1493`
DeepSkyBlue		`#00BFFF`
DimGray		`#696969`
DodgerBlue		`#1E90FF`
FireBrick		`#B22222`
FloralWhite		`#FFFAF0`
ForestGreen		`#228B22`
Fuchsia		`#FF00FF`
Gainsboro		`#DCDCDC`
GhostWhite		`#F8F8FF`
Gold		`#FFD700`
Goldenrod		`#DAA520`
Gray		`#808080`
Green		`#008000`
GreenYellow		`#ADFF2F`
Honeydew		`#F0FFF0`
HotPink		`#FF69B4`
IndianRed		`#CD5C5C`
Indigo		`#4B0082`
Ivory		`#FFFFF0`
Khaki		`#F0E68C`
Lavender		`#E6E6FA`
LavenderBlush		`#FFF0F5`
LawnGreen		`#7CFC00`
LemonChiffon		`#FFFACD`
LightBlue		`#ADD8E6`
LightCoral		`#F08080`
LightCyan		`#E0FFFF`
LightGoldenrodYellow		`#FAFAD2`
LightGreen		`#90EE90`
LightGrey		`#D3D3D3`
LightPink		`#FFB6C1`
LightSalmon		`#FFA07A`
LightSeaGreen		`#20B2AA`
LightSkyBlue		`#87CEFA`
LightSlateGray		`#778899`
LightSteelBlue		`#B0C4DE`
LightYellow		`#FFFFE0`
Lime		`#00FF00`
LimeGreen		`#32CD32`
Linen		`#FAF0E6`
Magenta		`#FF00FF`
Maroon		`#800000`
MediumAquamarine		`#66CDAA`
MediumBlue		`#0000CD`
MediumOrchid		`#BA55D3`
MediumPurple		`#9370DB`
MediumSeaGreen		`#3CB371`
MediumSlateBlue		`#7B68EE`
MediumSpringGreen		`#00FA9A`
MediumTurquoise		`#48D1CC`
MediumVioletRed		`#C71585`
MidnightBlue		`#191970`
MintCream		`#F5FFFA`
MistyRose		`#FFE4E1`
Moccasin		`#FFE4B5`
NavajoWhite		`#FFDEAD`
Navy		`#000080`
OldLace		`#FDF5E6`
Olive		`#808000`
OliveDrab		`#6B8E23`
Orange		`#FFA500`
OrangeRed		`#FF4500`
Orchid		`#DA70D6`
PaleGoldenrod		`#EEE8AA`
PaleGreen		`#98FB98`
PaleTurquoise		`#AFEEEE`
PaleVioletRed		`#DB7093`
PapayaWhip		`#FFEFD5`
PeachPuff		`#FFDAB9`
Peru		`#CD853F`
Pink		`#FFC0CB`
Plum		`#DDA0DD`
PowderBlue		`#B0E0E6`
Purple		`#800080`
Red		`#FF0000`
RosyBrown		`#BC8F8F`
RoyalBlue		`#4169E1`
SaddleBrown		`#8B4513`
Salmon		`#FA8072`
SandyBrown		`#F4A460`
SeaGreen		`#2E8B57`
Seashell		`#FFF5EE`
Sienna		`#A0522D`
Silver		`#C0C0C0`
SkyBlue		`#87CEEB`
SlateBlue		`#6A5ACD`
SlateGray		`#708090`
Snow		`#FFFAFA`
SpringGreen		`#00FF7F`
SteelBlue		`#4682B4`
Tan		`#D2B48C`
Teal		`#008080`
Thistle		`#D8BFD8`
Tomato		`#FF6347`
Turquoise		`#40E0D0`
Violet		`#EE82EE`
Wheat		`#F5DEB3`
White		`#FFFFFF`
WhiteSmoke		`#F5F5F5`
Yellow		`#FFFF00`
YellowGreen		`#9ACD32`

couleurBordureT couleur de la bordure partie supérieure transparent

couleurFond couleur fond du contenu transparent

couleurFondT couleur fond du titre transparent

couleurF couleur fond de la flèche transparent

couleurTexte couleur texte du contenu black

couleurTexteT couleur texte du titre black

Exemples[modifier | modifier le code]

Exemple 1 :

➤ Hello World! Ouvrez moi !

Je suis configurée par défaut afin d'offrir discrètement une boîte déroulante, en évitant de couper l'exposé général des idées. Si une grosse boîte encadrée bien voyante sur toute la largeur de la page était désirée, le modèle « boîte déroulante » conviendrait sans doute. En fait, comme on va le voir, on peut me configurer de façon à ce que je présente un aspect assez similaire à celui du modèle « boîte déroulante » (mais j'ai beaucoup plus de paramètres de configuration). Un autre avantage que j'ai sur le modèle « boîte déroulante » est que tous les caractères sont permis, et que j'interfère moins avec d'autres constructions.

Par défaut, je suis configurée à positionner le texte du titre et du contenu sur la gauche, et les bordures et les marges sont configurées à 0pt, c.a.d invisible.

Exemple 2 :

Rien n'empêche de m'encadrer

Et d'aligner le contenu textuel de la boîte comme on voudra à l'intérieur de la boîte, à gauche (défaut), au centre, comme ici, ce qui pour être utilisé en poésie ou autre, ou à droite (probablement rare, peut être utilisé pour l'arabe ou l'hébreu).

On peut évidemment sauter de ligne à l'intérieur de la boîte.

Exemple 3 :

En diminuant ma largeur, je peux aussi être globalement positionnée sur la droite ou au centre

Les bordures sont entierement configurable (couleur, épaisseur). Il en est de même des marges et des fontes. Noter que les marges du titre, ainsi que les autres paramètres du titre, sont indépendentes des paramètres du contenu de la boîte: tout est configurable. Ici, les marges gauche et droite du contenu sont à 1em, tandis que celle du titre est à 0em. La fonte du titre et du texte peut être contrôlée par les paramètres « tailleFonte/tailleFonteT », «poidsFonte/poidsFonteT» et « styleFonte/styleFonteT ».

Exemple 4 :

ou globalement centrée

Je peux être très excentrique. La couleur du titre, du fond du titre, du contenu textuel et de son fond sont contrôlables, et il en est de même des couleurs des bordures. Noter que le contenu a en qq sorte sa propre "boîte", qui peut être aligné (après avoir diminué sa largeur), encadré etc.

Exemple 5 :

Plus généralement, l'indentation de la partie supérieure est contrôlable

Et il en est de même de l'indentation de la partie inférieure. Notons que ces indentations s'effectuent relativement à l'alignement global de la boîte.
ATTENTION : si l'indentation + la largeur de la boîte est supérieure à la longueur de la ligne de la page html, la boîte sort des limites du texte de la page. Il faut donc avoir soin d'éviter ce cas : soit en fixant une indentation relative x (en %), et en prenant garde que la largeur de la boîte n'excède pas 100-x, soit en fixant une largeur de boîte suffisamment petite pour que la boîte ne sorte pas des limites.

Exemple 6 :

Les espaces me précédant et me suivant peuvent être réglés

Au moyen des paramètres « margeHautT/margeBasT » en ce qui concerne la boîte pliée. L'espace entre la partie supérieure et la partie inférieure (quand elle est dépliée) peut être contrôlée au moyen du paramètre « margeHaut », et l'espace entre la partie inférieure (quand elle est dépliée) et le texte la suivant peut être contrôlé au moyen du paramètre « margeBas ».

Exemple 7 :

Mon titre peut être centré au milieu de la boîte

Les angles des deux parties de la boîte peuvent être plus ou moins arrondis, selon la valeur des paramètres « arrondi » et « arrondiT »

Exemple 8 :

ou reporté sur la droite

Les largeurs des deux parties de la boîte sont indépendantes l'une de l'autre. On peut les contrôler au moyen des paramètres «largeur» et «largeurT». Si les largeurs des deux parties de la boîte sont égales, mais les épaisseurs de leur bordure inégales, il en résulte une différence de longueur des deux boîtes, un effet probablement indésirable. C'est une conséquence du langage html qui ne permet pas de mélanger les dimension relatives (%) avec les dimensions absolues (px, em. etc.). Dans le cas où ou un tel mixage d'épaisseurs serait nécéssaire, il faut donc ruser, par exemple en employant des grandeurs relatives pour régler l'épaisseur des bordures, et en calculant préalablement le déficit (égal à 2 fois la différence de la bordure la plus fine avec la plus épaisse).

Exemple 9 :

En fait, l'indentation de mon titre peut être contrôlée

Au moyen des paramètres « margeGaucheInterneT » ou « margeDroiteInterneT ». Similairement, les paramètres « margeGaucheInterne » ou « margeDroiteInterne » permettent de contrôler l'indentation du texte de la partie inférieure, comme dans ce cas.

Exemple 10 : On peut avantageusement utiliser la déroulante pour créer des listes déroulantes :

Début de la liste ;
- début d'une sous-liste (on introduit à la fin de cette ligne un retour de ligne, mais pas un saut de ligne) ;

sous-liste déroulante

pour obtenir cela, on a fixé le paramètre "margegaucheT" à 2em (i.e. indentation double) ;
et le paramètre "margeGauche" à 3em ;
À part ça, on a utilisé une liste ordinaire à l'intérieur de la boîte (étoiles).

fin de la liste.

Exemple 11 : en reprenant le style d'une boîte déroulante classique:

titre

[Dérouler]

texte

Bugs et points particuliers[modifier | modifier le code]

Introduire une image dans le titre de la boîte[modifier | modifier le code]

Le problème est que si l'utilisateur clique sur l'image, c'est le fichier de l'image qui s'ouvre et pas la boîte déroulante. La solution est d'ajouter "link=" (avec un argument vide) dans les paramètre du lien de l'image.

Exemple : {{déroulante/début|titre =[[File:Soft245.png|link=]]}} contenu=texte {{déroulante/fin}} Ce qui donne :

contenu=texte

Bugs[modifier | modifier le code]

On peut à la rigueur utiliser la déroulante à l'intérieur d'une liste, mais il faut alors prendre garde de ne pas introduire de retour de lignes ni avant, ni après, ni à l'intérieur de "déroulante". Par conséquent, il faudra utiliser des <
pour effectuer les retours de lignes, et placer manuellement les bullets, étoiles etc. de la liste. Par exemple, le code

*Ceci est une liste {{Utilisateur:Maimonid/Modèle déroulante/début|titre=sous-liste|épaisseurBordure=0|margeGaucheInterne=1em}} * La marge gauche interne a ici été fixé à 1em (écart standart pour les listes)<br>* etc.<br/>{{Utilisateur:Maimonid/Modèle déroulante/fin}}

produit :

Ceci est une liste

sous-liste

* La marge gauche interne a ici été fixée à 1em (écart standard pour les listes)
* etc.

À noter : Dans ce cas de figure, la largeur relative maximale (100%) est la largeur de la ligne restant après avoir retranché l'indentation due à la liste, sous-liste, etc.

Une bien meilleure solution est d'utiliser les paramètres de la boîte pour provoquer l'indentation, puis d'utiliser les listes habituelles à l'intérieure de la boîte. Par exemple

Début de la liste
item
- début d'une sous-liste (on introduit à la fin de cette ligne un retour de ligne, mais pas un saut de ligne) ;